<script setup lang="ts">
import { numberToVh } from '@/utils'
import { onMounted, ref, watch, computed, reactive } from 'vue'
import { VxeSelect, VxeOption } from 'vxe-pc-ui'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { RadarChart } from 'echarts/charts'
import { TooltipComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import CdcModal from '@/components/CdcModal/index.vue'
import CdcTable from '@/components/CdcTable/index.vue'
import linxing from '@/assets/images/ling-xing2.png'
import { blzsList, blzsInfo, blzsListInfo } from '@/api'
use([CanvasRenderer, RadarChart, TooltipComponent])
const cdcModalRef = ref<InstanceType<typeof CdcModal>>()
const tableData = ref([])
const initChartData = [
  { name: '健全的支部班子', value: 0, key: 'tjsj1', max: 10 },
  { name: '正常的组织生活', value: 0, key: 'tjsj2', max: 25 },
  { name: '管用的工作制度', value: 0, key: 'tjsj3', max: 20 },
  { name: '良好的工作业绩', value: 0, key: 'tjsj4', max: 30 },
  { name: '合格的党员队伍', value: 0, key: 'tjsj5', max: 15 },
]
const chartData = ref(JSON.parse(JSON.stringify(initChartData)))
const chartOptions = computed(() => {
  return {
    tooltip: {
      show: true,
      confine: true,
      // renderMode: 'html', //格式不对
      formatter: function (param) {
        // console.log(param)
        const str = chartData.value
          .map((v) => {
            return `<div>${param.marker}  <span>${v.name}: ${v.value}</span></div> `
          })
          .join('')
        return str
      },
    },
    radar: [
      {
        indicator: chartData.value,
        radius: numberToVh(100), //缩放
        center: ['50%', '50%'],

        axisLine: {
          lineStyle: {
            color: '#89D6E0',
          }, //轴线颜色
        },
        axisName: {
          fontSize: numberToVh(16),
          padding: [0, numberToVh(5), 0, 0],
          formatter: (value: number, indicator) => {
            // console.log(indicator)
            const index = chartData.value.findIndex((v) => v.name === indicator.name)
            const it = chartData.value.find((v) => v.name === indicator.name)
            const _t = `${indicator.value} / ${it.max}`
            return `{img|}{a|${value}}${index == 0 ? `{pr20|}{b|${_t}}` : `\n{pl30|}{b|${_t}}`}`
          },
          overflow: 'breakAll',
          rich: {
            img: {
              backgroundColor: {
                image: linxing,
              },
              left: numberToVh(10),
              height: 30,
              width: 30,
            },
            pr20: {
              padding: [numberToVh(20), numberToVh(10), 0, 0],
            },
            pl30: {
              padding: [0, numberToVh(30), 0, 0],
              align: 'left',
            },
            a: {
              fontFamily: 'HYk2gj',
              fontSize: numberToVh(18),
              // padding: [10, 0, 0, 0],
              color: '#6CEDFF',
              textShadowColor: '#FFF',
            },
            b: {
              color: '#fff',
              fontSize: numberToVh(16),
              align: 'left',
              padding: [numberToVh(4), numberToVh(30), 0, 0],
              fontFamily: 'AlibabaPuHuiTi, AlibabaPuHuiTi',
            },
          },
        },
        splitArea: {
          areaStyle: {
            color: '#00273A',
          },
        },
        splitLine: {
          lineStyle: {
            width: 1,
            color: '#89D6E0',
          }, //轴线颜色
        },
      },
    ],
    series: [
      {
        type: 'radar',
        name: '区域分布',
        radarIndex: 0,
        areaStyle: {
          normal: {
            color: 'rgba(251, 228, 112, .5)',
          },
        },
        symbolSize: 8,
        itemStyle: {
          color: '#FBE470',
        },
        lineStyle: {
          normal: {
            color: '#FBE470', // 线条颜色
            width: 2, // 线条宽度
          },
        },
        data: [
          {
            value: chartData.value.map((v) => v.value),
            name: 'Allocated Budget',
          },
        ],
      },
    ],
  }
})
const zsItem = reactive({
  department_name: '办公室党支部',
  score: 0,
})
const open = (row) => {
  init(row)
  Object.assign(zsItem, row)
  jfList.value.length = 0
  chartData.value = JSON.parse(JSON.stringify(initChartData))
  cdcModalRef.value?.showModal()
}
const selectRef = ref()
const selectIsFocus = ref(true)
const selectValue = ref('')
const jfList = ref([]) // 加分列表
const init = (row) => {
  // tableData.value = [row]
  // blzsList().then((res) => {
  //   if (res.code === '200') {
  //     const tjsj1 = res.data[0]?.statData.tjsj1 || []
  //     tjsj1.forEach((item) => {
  //       item.direction = Number(item.rank) > Number(item.last_rank) ? 'bottom' : 'top'
  //     })
  //     tableData.value = tjsj1
  //   }
  // })
  // 堡垒指数详情
  const data = {
    statCode: 'ZJCDC_BLZS_DETAIL_004',
    orgId: row.orgId,
  }
  blzsInfo(data).then((res) => {
    if (res.code === '200') {
      chartData.value.forEach((item) => {
        item.value = res.data[0]?.statData[item.key] || 0
      })
    }
  })
  const data2 = {
    statCode: 'ZJCDC_BLZS_LIST_002',
    orgId: row.orgId,
  }
  // 弹窗详情加分项
  blzsListInfo(data2).then((res) => {
    console.log(res)
    if (res.code === '200') {
      jfList.value = res.data[0]?.statData.tjsj1 || []
    }
  })
}
onMounted(() => {})
watch(
  () => selectRef.value?.isPanelVisible(),
  (val) => {
    selectIsFocus.value = val
  },
)
defineExpose({
  open,
})
</script>

<template>
  <CdcModal
    ref="cdcModalRef"
    :data="{
      title: '堡垒指数',
    }"
  >
    <div class="zs-title mb-10px">
      {{ zsItem.department_name }}&nbsp;<b>{{ zsItem.score }}</b
      >分
    </div>
    <div class="flex justify-between overflow-hidden">
      <div class="w-400px h-400px">
        <CdcTable
          :data="{
            columns: [
              {
                field: 'rule',
                // type: 'html',
                title: '堡垒指数规则',
                slot: true,
              },
              { field: 'department_name', title: '内容' },
              { field: 'score', title: '加分分值', width: 100 },
            ],
            showSeq: false,
            tableConfig: {
              data: jfList,
              align: 'center',
              // 'header-cell-class-name': 'headCellClass',
              'header-row-class-name': 'bg-#555 header-row-class text-[16px] text-white',
              'row-class-name': ({ $rowIndex }: any) => {
                return `${$rowIndex % 2 == 0 ? 'bg-transparent' : 'bg-#253542'} text-white`
              },
            },
          }"
        ></CdcTable>
      </div>
      <div class="flex-1 ml-[40px]">
        <!-- @click="selectIsFocus = !selectIsFocus" -->
        <!-- <div class="header flex justify-between items-center h-50px leading-50px relative">
          <VxeSelect v-model="selectValue" ref="selectRef">
            <VxeOption label="选项1" value="1"></VxeOption>
            <VxeOption label="选项2" value="2"></VxeOption>
            <VxeOption label="选项3" value="3"></VxeOption>
          </VxeSelect>
          <img
            src="@/assets/images/arrow-down.png"
            alt=""
            class="vxe-icon arrow-down absolute right-32px"
            :class="{
              'rotate-180': selectIsFocus,
            }"
          />
        </div> -->
        <div class="w-600px m-auto h-400px radar-chart">
          <v-chart class="chart" :option="chartOptions" autoresize width="100%" />
        </div>
        <!-- <div class="mt-10px">
          <p class="text-24px mb-10px">加分项</p>
          <CdcTable
            :max-height="198"
            :data="{
              columns: [
                {
                  field: 'department_name',
                  title: '党组织',
                },
                { field: 'reason', title: '加分原因' },
                { field: 'score', title: '得分分值' },
              ],
              showSeq: false,
              tableConfig: {
                data: jfList,
                align: 'center',
                'header-row-class-name': 'headerRowClass text-white',
                'row-class-name': 'bg-#141F25 text-white',
                'cell-class-name': ({ $rowIndex }) => {
                  return `py-10px border-b-12px border-#08090b border-solid border-x-0 ${$rowIndex == 0 ? 'border-t-12px' : ' '}`
                },
              },
            }"
          ></CdcTable>
        </div> -->
      </div>
    </div>
  </CdcModal>
</template>

<style lang="scss" scoped>
:deep(.table-left) {
  background-image: url('@/assets/images/t-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
}
:deep(.vxe-table--render-wrapper) {
  background-color: transparent;
  .vxe-table--body-wrapper {
    background-color: transparent;
  }
}
:deep(.headCellClass) {
  &:not(:last-child) {
    .vxe-cell {
      border-right: 1px solid #fff;
    }
  }
}
:deep(.header-row-class) {
  background-image: url('@/assets/images/table-header-bg.png'); //url('@/assets/images/image_background.png');
  background-repeat: no-repeat;
  background-size: cover;
}
:deep(.vxe-table--header-wrapper.body--wrapper) {
  background-color: transparent;
}
.header {
  background-image: url('@/assets/images/dydw.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.radar-chart {
  padding: 20px 30px;
  background-image: url('@/assets/images/radar-bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.arrow-down {
  transition: transform 0.2s ease-in-out;
}
:deep(.vxe-select) {
  width: 100%;
  height: 50px;
}
:deep(.vxe-input) {
  width: 100%;
  height: 50px;
  font-size: 20px;
  border: none;
  // background-image: url('../../../assets/images/dydw.jpg');
  background-color: unset;
  padding-left: 32px;
  .vxe-input--inner {
    color: #fff;
    &::placeholder {
      color: #fff;
    }
  }
}
:deep(.vxe-input--suffix-icon) {
  display: none;
}
.zs-title {
  font-size: 28px;
  font-family: HYk2gj;
  color: transparent;
  background: linear-gradient(to bottom, #fafafc 0%, #bdf3f5 100%);
  -webkit-background-clip: text;
  b {
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
  }
}
</style>
